<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/login.css" />
		<link rel="stylesheet" href="../css/app.css" />
	
	<style>
		body{
			/*background-color:#7fb2f1;*/
			background: url(../img/background_img/control_bg.png) no-repeat;
			background-size:300%;
			background-position:25% 35% ;
		}
		.mui-content{
			background-color:initial;
		}
	    .mui-grid-view.mui-grid-9{
			border-radius:20px 20px 0px 0px;
			box-shadow:0px 5px 8px rgba(202,202,202,0.2);
			border: none;
		}
		.mui-content>.mui-table-view:first-child{
			margin-top:100px;
			margin-left: 10px;
			margin-right: 10px;
		}
		.mui-bar.mui-bar-tab{
			box-shadow: none;
			background-color: initial;
		}
		.header{
			box-shadow: none;
			background-color: initial;
		}
		.television{
		zoom: 20%;
		}
		.volume{
			zoom:20%;
		}
	    
	    .title_icon{
	    	zoom: 8%;
	    	margin-right: 1.5em;
	    }
	    /*温度显示begin*/
	    #temperature_number{
	    	float: left;
	    	margin: 1.5em 0em 0em 0.3em;
	    	color: white;
	    	font-size: 5em;
	    }
	    .oc{
	    	float: left;
	    	margin: 2.3em 0em;
	    	color: white;
	    	font-size: 3em;
	    }
	    .temperature_now{
	    	color: white;
	    	font-size: 1.1em;
	    	position: absolute;
	    	margin:3.5em 1.5em;
	    }
	    .wind{
	    	background-color: white;
	    	color: black;
	    	font-size: 1em;
	    	position: absolute;
	    	margin:3.8em 6.8em;
	    	padding:0.1em 0.3em;
	    	border-radius:5px ;
	    }
	    #wind_type_icon{
	    	zoom: 10%;
	    }
	    .main_up{
	    	zoom: 20%;
	    }
	    .main_up1{
	    	zoom: 35%;
	    }
	    .main_up0{
	    	zoom: 20%;
	    }
	    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
	    	padding: 0 0;
	    }
	    /*温度显示end*/
	</style>
	</head>
	
	<body>
		<header  class="header mui-bar ">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #FD843C;">
				<span class="mui-icon mui-icon-left-nav" style="color: white;"></span>
				<span style="color: white;"></span>
			</button>
				<h1 class="mui-title"></h1>
		</header>
		<div class="mui-content">
			<!--遥控类型begin-->
			<div class="type_bar">
				<div  class="temperatures">
					<span class="temperature_now"></span>
				</div>
				<div  class="wind">
					<!--<img id="wind_type_icon" src="../img/main icon/left_right.png" />-->
					<span id="wind_type"></span>
				</div>
			</div>	
			<!--<div class="type">
			  <div id="control_type_name" class="type_name">空调</div>
		    </div>-->
		    <!--遥控类型end-->
		</div>
		<!--控制面板begin-->
		<nav class="conteol_bar mui-bar mui-bar-tab">
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="allSwich">
				<li id="10" btnName="volume_add" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"style="margin-top: 10px;">
					<a href="#"><span class="volume"><img src="../img/main icon/add.png"></span></a>
					<div class="mui-media-body">音量</div>
				</li>
		        <li id="0" btnName="power" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a href="#" id="condition_swich">
		                    <span class="television"><img src="../img/main icon/on_off.png"></span>
		                    <div class="mui-media-body" style="color: #eb4f38;">ON/OFF</div>
		            	</a>
		        </li>
		         <li id="2" btnName="channel_add" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="margin-top: 15px;">
					<a href="#"><span class="volume"><img src="../img/main icon/jia.png"></span></a>
					<div class="mui-media-body">频道</div>
				</li>
		        <li id="11" btnName="volume_low" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#"><span class="volume"><img src="../img/main icon/low.png"></span></a>
				</li>
				<li id="6" btnName="up" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#"><span class="main_up0"><img src="../img/main icon/low_K.png"></span></a>
				</li>
				<li id="3" btnName="channel_low" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#"><span class="volume"><img src="../img/main icon/jian.png"></span></a>
				</li>
				<li id="8" btnName="left" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#"><span class="main_up"><img src="../img/main icon/low_left.png"></span></a>
				</li>
				<li id="12" btnName="ok" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#"><span class="main_up1"><img src="../img/main icon/ok.png"></span></a>
				</li>
				<li id="9" btnName="right" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#"><span class="main_up"><img src="../img/main icon/low_right.png"></span></a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					
				</li>
				<li id="7" btnName="down" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#"><span class="main_up"><img src="../img/main icon/low_down.png"></span></a>
				</li>
                <!--<li class="title_bottom mui-table-view-cell mui-media mui-col-sm-12 mui-col-xs-12">
                	<label><img id="title_type" class="title_icon" src="../img/gray/dianshi.png"></label><span id="title_name">电视</span>
                </li>-->
			</ul>        
		</nav>		
		<!--控制面板end-->	
		
		
<script src="../js/mui.min.js"></script>
<script src="../js/service.js"></script>
<script src="../js/tools.js"></script>
<script type="text/javascript">
//本区域用来方式初始化的变量
//初始化变量************begin***************************************
var funcCodes = {};
var isTimeout = false;
var ContinueShow = true;
var UserID;
var deviceID;
//初始化变量************end*****************************************
var Timeout = function() {
	if (isTimeout) {
		ContinueShow = false;
		plus.nativeUI.closeWaiting();
		plus.nativeUI.toast('数据获取超时，请稍后再试');
	}
};


//mui初始化
mui.init({
	
});
var getData = function(UserID, deviceID){
	
	isTimeout = true;
	ContinueShow = true;
	setTimeout(Timeout, 7000);
	
	var getdevicefunction_data = { 
		reqKey: "SmartHouse_getdevicefunction",
		input:{
			UserID:UserID,
			deviceID:deviceID
			}
	};
    service.OnDoPostServerJson(getdevicefunction_data, false, false, function(jsonData){//jsonData即返回的json数据 并且为json格式
    	isTimeout = false;
    	var readyCode = 0;
		if (jsonData.result == 0){
			//alert("数据接收成功");
			if(jsonData["ansData"]){
  				dealData(jsonData["ansData"]);
  				readyCode = 0;
			}
			else {
				readyCode = -1;
			}
		} else {
			plus.nativeUI.toast(jsonData.result);
			readyCode = -2;
		}
  		if (ContinueShow) {
    		console.log("readyCode = " + readyCode);
			var tel_webview = plus.webview.getWebviewById('telecontrol.html');
			mui.fire(tel_webview, 'subPageDataReady', 
			{
				isReady : readyCode
			});
		}
	}); 
};
	
	function dealData(data){
		// 电视需要根据二级功能ID来判断按钮的控制码
		funcCodes = {};
		for(var i = 0; i < data.length; i++){
			funcCodes[data[i].secondfunctionID] = data[i].deviceCode;
			// console.log(data[i])
//			document.getElementById("allSwich").innerHTML+='<li devicefunctionID = "'+ data[i].devicefunctionID +'" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">'
//	            	+'<a href="#">'
//	                +'<span class="swich_icon">'
//	                +'<img src="' + data[i].devicefunctionPicture + '"></span>'
//	                +'<div class="mui-media-body" style="color: #eb4f38;">'+ data[i].devicefunctionName + '</div>'
//	                +'</a></li>'
		}
		
	//	console.log(JSON.stringify(funcCodes));
	}
//页面加载完成后执行
mui.plusReady(function() {
	// getData();
	mui.back = function() {
		plus.webview.currentWebview().hide();
	};
	mui("#allSwich").on('tap', 'li', function () {
		var id_str = this.id;
		var id_int = Number(id_str);
		console.log("id_int:" + id_int);
				// 获取成功
		var data = {
			ip: "112.124.42.42",
			port: "80",
            controllCode: funcCodes[id_int]
        };
        
        console.log(funcCodes[id_int]);
        var notiClass = plus.ios.importClass("NSNotificationCenter");
        notiClass.defaultCenter().postNotificationNameobject("PostControllCodes", JSON.stringify(data));
	});
});	

//本区域用来编辑控件的响应时间****************************************
//控件绑定响应事件************begin**********************************
//提交反馈相应事件



//控件绑定事件响应************end************************************

//一下区域用来书本页公用写函数
//方法************begin**********************************

//方法************end************************************
</script>
</body>

</html>